<template>
	<view class="page">
		<uni-nav-bar background-color="#00a9ff" title="测评问卷" color="white" :fixed="true"
		  statusBar="true"/>
		
		<view class="selectTxt">-点击进入问卷测评：</view>
		<text class="questionEnter" @click="handleChapter">
			心理问卷测评入口
		</text>
		
		<view class="selectTxt" style="margin-top: 80rpx;">-以下为问卷填写记录：</view>
		<uni-card v-for="(item, index) in queRecords"
		 :title="item.categoryName" :extra="item.testDate"
		 style="border-radius: 10px; background-color: #ffffff90;" shadow="0,0,0,0" :border="false"
		  @click="answerQue(item.id)">
			<text>分数: {{item.score}}</text>
		</uni-card>

	</view>
</template>

<script>
	import { getTestScoresWithCategoryNames } from '../../service/api.js'; 

	export default {
		data() {
			return {
				queRecords: []
			}
		},
		onLoad() {
			this.fetchTestScores();
		},
		methods: {
			handleChapter() {
				uni.navigateTo({
					url:'/pages/category/index'
				});
			},
			answerQue(naireId) {
				uni.navigateTo({
					url:"/pages/questions/questions"
				});
			},
			fetchTestScores() {
				getTestScoresWithCategoryNames()
					.then(data => {
						this.queRecords = data;
					})
					.catch(err => {
						console.error('获取测试分数失败', err);
					});
			}
		}
	}
</script>

<style>
.selectTxt{
	border-radius: 40rpx;
	font-size: 50rpx;
	color: #0a77c0;
	padding-left: 30rpx;
	margin-top: 30rpx;
	
}
.questionEnter{
	font-size: 35rpx;
	color: #00a9ff;
	text-decoration: underline;
	display: flex;
	margin-top: 20rpx;
	margin-left: 30rpx;
	
}
.questionEnter:active{
	color: #b8393b;
}
</style>
